<template>
  <view
    class="container"
    :style="{
      backgroundImage: `url(${oss2(`activity/item_${detailNo}/bg.png`)})`,
    }"
  >
    <image class="h-83px mb-15px" :src="imageUri('title.png')" />
    <!-- <view class="detail-text">图片仅供参考</view> -->
    <image
      v-for="(item, index) in contentItems[detailNo]"
      :key="index"
      :src="imageUri(item.name)"
      :style="{ height: `${item.h}px`, ...item.style }"
    />
    <view class="detail-action">
      <image @click.stop="onBack" :src="oss2('activity/back_btn.png')" />
      <image
        :src="oss2('activity/share_btn.png')"
        @click.stop="shareDialog = true"
      />
    </view>
    <image class="h-132px -mt-28px" :src="oss2('activity/down_bg.png')" />
  </view>

  <!-- 分享弹窗 -->
  <view class="mode" v-if="shareDialog">
    <view class="Dialog">
      <view class="bg_img">
        <image :src="oss2('activity/share_bg.png')"></image>
      </view>

      <view class="share_btn flex">
        <image
          :src="oss2('activity/poster_share_btn.png')"
          @click.stop="createPoster"
        ></image>

        <button open-type="share">
          <image :src="oss2('activity/wx_share_btn.png')"></image>
        </button>
      </view>
    </view>
  </view>

  <!--  海报绘制  -->
  <poster ref="posterRef" :height="811.5" />
</template>

<script setup>
import { oss2 } from "@/utils/utils";
import { ref } from "vue";
import { onLoad, onShareAppMessage } from "@dcloudio/uni-app";
import Poster from "@/components/poster";

const detailNo = ref(1);
const shareDialog = ref(false);
const imageUri = (name) => oss2(`activity/item_${detailNo.value}/${name}`);
const contentItems = {
  1: [
    { name: "content_1.png", h: 132, style: { paddingBottom: "34rpx" } },
    { name: "content_2.png", h: 104, style: { paddingBottom: "22rpx" } },
    { name: "content_3.png", h: 976, style: { paddingBottom: "24rpx" } },
  ],
  2: [
    { name: "content_1.png", h: 132, style: { paddingBottom: "34rpx" } },
    { name: "content_2.png", h: 104, style: { paddingBottom: "22rpx" } },
    { name: "content_3.png", h: 976, style: { paddingBottom: "6rpx" } },
  ],
  3: [
    { name: "content_1.png", h: 132, style: { paddingBottom: "34rpx" } },
    { name: "content_2.png", h: 104, style: { paddingBottom: "22rpx" } },
    { name: "content_3.png", h: 988, style: { paddingBottom: "32rpx" } },
  ],
  4: [
    { name: "content_1.png", h: 132, style: { paddingBottom: "40rpx" } },
    { name: "content_2.png", h: 104, style: { paddingBottom: "14rpx" } },
    { name: "content_3.png", h: 764, style: { paddingBottom: "32rpx" } },
  ],
  5: [
    { name: "content_1.png", h: 132, style: { paddingBottom: "34rpx" } },
    { name: "content_2.png", h: 104, style: { paddingBottom: "22rpx" } },
    { name: "content_3.png", h: 764, style: { paddingBottom: "30rpx" } },
  ],
  6: [
    { name: "content_1.png", h: 132, style: { paddingBottom: "14rpx" } },
    { name: "content_2.png", h: 546, style: { paddingBottom: "28rpx" } },
  ],
};
const posterRef = ref(null);

onLoad((option) => {
  detailNo.value = option.no || 1;
  getApp().accessLogAdd();
});

const onBack = () => {
  uni.navigateBack({ delta: 1 });
};

const createPoster = () => {
  console.log(posterRef);
  posterRef.value.createPoster({}, posterRef, false);
};

onShareAppMessage((e) => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1].route;
  const pageUrl = currentPage;

  const shareObj = {
    title: "欢聚时光，和家人聚集一起DIY奥利奥甜品吧！好吃又好玩～", // 默认是小程序的名称(可以写slogan等)
    path: pageUrl, // 默认是当前页面，必须是以‘/’开头的完整路径
    imageUrl: oss2("activity/share_cart_img.png"), //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
    success: (res) => {
      // 转发成功之后的回调
      if (res.errMsg == "shareAppMessage:ok") {
      }
    },
    fail: (err) => {
      // 转发失败之后的回调
      console.log("转发失败之后的回调", err);
      if (res.errMsg == "shareAppMessage:fail cancel") {
        // 用户取消转发
        console.log("用户取消转发");
      } else if (res.errMsg == "shareAppMessage:fail") {
        // 转发失败，其中 detail message 为详细失败信息
        console.log("转发失败，其中detail message 为详细失败信息");
      }
    },
    complete: () => {
      // 转发结束之后的回调（转发成不成功都会执行）
      console.log("转发结束之后的回调（转发成不成功都会执行）");
    },
  };
  console.log(shareObj);
  return shareObj;
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  min-height: 100vh;
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 375px;
  padding-top: 335px;
  background-color: #0860cc;
  image {
    width: 100%;
    display: block;
  }
}
.detail-action {
  display: flex;
  align-items: center;
  padding: 0 50px;
  justify-content: space-between;
  image {
    width: 109px;
    height: 47px;
  }
}

.detail-text {
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  margin-bottom: -12px;
  padding: 0 10px;
  color: #0051a3;
  font-size: 10px;
}

.mode {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.63);

  .bg_img {
    width: 351px;
    height: 512px;
    position: absolute;
    z-index: 1001;
    top: 39px;
    left: 12px;
    right: 12px;
    image {
      width: 100%;
      height: 100%;
    }
  }

  .share_btn {
    width: 100%;
    position: absolute;
    top: 550px;
    justify-content: space-around;
    z-index: 1001;
    box-sizing: border-box;
    padding: 0 12px;
    image {
      width: 149px;
      height: 40px;
    }

    button {
      padding: 0;
      border: none;
      width: 149px;
      height: 40px;
      background-color: transparent;
      margin: 0;
    }
  }
}
</style>
